<template>
	<div class="zuZhiJiaGou center align-start fWrap">
		<div class="right bfff left-bumen">
			<div class="title">
				<el-button type="primary" plain @click="oneGroup" v-auth="['knowledge:kbGroups:save']">
					<div class="center">
						<i class="iconfont f14 mr15">&#xe649;</i>
						新增群组
					</div>
				</el-button>
			</div>
			<!-- draggable -->
			<el-tree
				class="el-tree"
				default-expand-all
				@node-click="treeClick"
				:default-checked-keys="[9, 10]"
				ref="treeRef"
				:data="dataSource"
				node-key="id"
				highlight-current
				:props="defaultProps"
			>
				<template #default="{ node, data }">
					<div class="el-tree-item">
						<!--  @click="treeClick(data)" -->
						<span class="f14 c333 treeRefSpan"
							><el-tooltip class="tooltip" effect="light" :content="node.label" placement="top">
								{{ node.label }}
							</el-tooltip>
						</span>
						<el-button
							class="el-button"
							type="primary"
							link
							:icon="Edit"
							@click.stop="editTree(data)"
							v-auth="['knowledge:kbGroups:edit', 'system:sysUser:edit']"
						></el-button>
						<el-button
							class="el-button"
							type="danger"
							link
							:icon="Delete"
							@click.stop="delTree(data)"
							v-auth="['knowledge:kbGroups:delete', 'knowledge:kbGroups:deleteBatch']"
						></el-button>
					</div>
				</template>
			</el-tree>
		</div>
		<div class="nav-dis" @click="drawer = true">部门</div>
		<el-drawer v-model="drawer" size="70%" :with-header="false">
			<div class="title">
				<el-button type="primary" plain @click="oneGroup" v-auth="['knowledge:kbGroups:save']">
					<div class="center">
						<i class="iconfont f14 mr15">&#xe649;</i>
						新增群组
					</div>
				</el-button>
			</div>
			<el-tree
				default-expand-all
				@node-click="treeClick"
				:default-checked-keys="[9, 10]"
				ref="treeRef"
				:data="dataSource"
				node-key="id"
				highlight-current
				:props="defaultProps"
			>
				<template #default="{ node, data }">
					<div class="custom-tree-node center w100">
						<span class="f14 c333 flex" :class="{ fbold: data.id == 1 }">{{ node.label }}</span>
					</div>
				</template>
			</el-tree>
		</el-drawer>
		<div class="left flex">
			<div class="bfff left-bottom">
				<!-- 二级群组按钮 -->
				<div class="center flex-start fWrap table-head" v-if="showChlid">
					<div>
						<div class="center table-head3 fWrap">
							<div class="c666 f14">用户名：</div>
							<div>
								<el-input
									type="text"
									placeholder="请输入用户名"
									v-model="onSearchText"
									@keyup.enter.native="onSearch"
								/>
							</div>
							<div class="box-button-top">
								<el-button class="primarys" type="primary" @click="onSearch('yh')">搜索</el-button>
								<el-button type="primary" plain @click="resetting">重置</el-button>
							</div>
						</div>
						<div>
							<el-button
								class="primary"
								type="primary"
								@click="setShowMoreCheng"
								v-auth="['knowledge:kbGroups:list', 'knowledge:kbGroups:save', 'system:sysDept:list']"
								>+新增成员</el-button
							>
							<el-button
								class="danger"
								type="warning"
								plain
								@click="delUserAll"
								v-auth="['knowledge:kbGroupsUser:deleteBatch']"
								>批量删除</el-button
							>
						</div>
					</div>
				</div>
				<!-- 一级群组按钮 -->
				<div class="center flex-start fWrap table-head" v-else>
					<div>
						<div class="center table-head3 fWrap">
							<div class="c666 f14">群组：</div>
							<div>
								<el-input
									type="text"
									placeholder="请输入群组名"
									v-model="onSearchText"
									@keyup.enter.native="onSearch"
								/>
							</div>
							<div class="box-button-top">
								<el-button class="primarys" type="primary" @click="onSearch('qz')">搜索</el-button>
								<el-button type="primary" plain @click="resettingGroup">重置</el-button>
							</div>
						</div>
						<div>
							<el-button
								class="primary"
								type="primary"
								v-auth="['knowledge:kbGroups:save']"
								@click="twoGroup"
								>+新增子群组</el-button
							>
							<!--  -->
							<el-button
								class="danger"
								type="danger"
								v-auth="['knowledge:kbGroups:delete']"
								plain
								@click="delGroupAll"
								>批量删除</el-button
							>
						</div>
					</div>
				</div>
				<div class="center table-head2">
					<div class="f14 choice-num flex ctheme">已选：{{ tableLis.length }}</div>
				</div>
				<div class="table-scrol">
					<div class="table">
						<!-- 二级群组表格 -->
						<el-table
							@select="selectClick"
							:data="tableDataChlid"
							@select-all="selectAll"
							v-if="showChlid"
							style="width: 100%"
						>
							<el-table-column align="center" type="selection" min-width="60" />
							<el-table-column
								align="center"
								prop="realName"
								label="姓名"
								show-overflow-tooltip
								min-width="100"
							/>
							<el-table-column
								align="center"
								prop="loginName"
								label="登录名"
								show-overflow-tooltip
								min-width="100"
							/>
							<el-table-column
								align="center"
								prop="deptName"
								label="部门"
								show-overflow-tooltip
								min-width="100"
							/>
							<el-table-column
								align="center"
								prop="groupName"
								label="所在群组"
								show-overflow-tooltip
								min-width="100"
							/>
							<el-table-column
								align="center"
								prop="phone"
								label="联系方式"
								show-overflow-tooltip
								min-width="150"
							/>
							<el-table-column
								align="center"
								prop="email"
								label="邮箱"
								show-overflow-tooltip
								min-width="150"
							/>
							<el-table-column align="center" label="操作" min-width="150">
								<template #default="{ row }">
									<!-- <el-button
										v-auth="['knowledge:kbGroups:edit', 'system:sysUser:edit']"
										:icon="EditPen"
										@click="editUser(row)"
										title="编辑"
									></el-button> -->
									<div class="table-color">
										<el-button
											v-auth="['knowledge:kbGroupsUser:delete', 'knowledge:kbGroups:deleteBatch']"
											:icon="Delete"
											@click="delUser(row)"
											title="删除"
										></el-button>
									</div>
								</template>
							</el-table-column>
							<template #empty>
								<el-empty description="暂无数据" />
							</template>
						</el-table>
						<!-- 一级群组表格 -->
						<el-table
							@select="selectClick"
							:data="tableData"
							@select-all="selectAll"
							v-else
							style="width: 100%"
						>
							<el-table-column align="center" type="selection" min-width="60" />
							<el-table-column
								align="center"
								prop="name"
								label="群组名称"
								show-overflow-tooltip
								min-width="150"
							/>
							<el-table-column
								align="center"
								prop="sort"
								label="权重"
								show-overflow-tooltip
								min-width="150"
							/>
							<el-table-column
								align="center"
								prop="createTime"
								label="创建时间"
								show-overflow-tooltip
								min-width="200"
							>
								<template #default="{ row }">
									<div>{{ times(row.createTime) }}</div></template
								>
							</el-table-column>
							<el-table-column prop="k7" align="center" label="操作" min-width="200">
								<template #default="{ row }">
									<div class="table-color">
										<el-button
											v-auth="['knowledge:kbGroups:edit', 'system:sysUser:edit']"
											:icon="Edit"
											@click="oneDiet(row)"
										></el-button>
										<el-button
											v-auth="['knowledge:kbGroupsUser:delete', 'knowledge:kbGroups:deleteBatch']"
											:icon="Delete"
											@click="delGroup(row)"
										></el-button>
									</div>
								</template>
							</el-table-column>
							<template #empty>
								<el-empty description="暂无数据" />
							</template>
						</el-table>
					</div>
				</div>
				<div class="bfff pagination-class">
					<v-pagination
						:total="total"
						:size="pageSize"
						:page="current"
						@pagination="fetchList"
						@paginations="fetchLists"
					></v-pagination>
				</div>
			</div>
		</div>
		<!-- 新增群组 -->
		<el-dialog
			class="cheng-dialog"
			v-model="visible"
			:show-close="false"
			:close-on-click-modal="false"
			destroy-on-close
			width="800px"
		>
			<template #header="{ close, titleId, titleClass }">
				<div class="dialog-header center btheme cfff">
					<img src="@/assets/image/houTai/xqun.png" alt="" />
					<div class="flex f16 fbold">{{ title }}</div>
					<el-icon class="pointer" size="20" color="#fff" @click="quxiao">
						<Close />
					</el-icon>
				</div>
			</template>
			<div class="dialog-content">
				<el-form
					ref="ruleFormRef"
					:model="ruleForm"
					:rules="rules"
					class="demo-ruleForm"
					:size="formSize"
					status-icon
					@submit.native.prevent
				>
					<div class="center">
						<div class="flex">
							<el-form-item label="群组" prop="name">
								<el-input
									class="name"
									v-model="ruleForm.name"
									placeholder="请输入群组名称"
									maxlength="20"
									show-word-limit
								/>
							</el-form-item>
							<el-form-item label="权重" prop="weight">
								<template #label>
									权重
									<el-tooltip
										class="box-item"
										effect="dark"
										content="数字越大越靠前"
										placement="top"
										:offset="0"
									>
										<el-icon class="label-icon"><InfoFilled /></el-icon>
									</el-tooltip>
								</template>
								<template #default>
									<el-input-number v-model="ruleForm.sort" :min="1" @change="handleChange" />
								</template>
							</el-form-item>
						</div>
					</div>
				</el-form>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="quxiao">取消</el-button>
					<el-button type="primary" @click="submitForm(ruleFormRef)"> 确定 </el-button>
				</div>
			</template>
		</el-dialog>

		<!-- 新增成员 -->
		<el-dialog
			top="10vh"
			class="dialog"
			v-model="visiblecheng"
			:show-close="false"
			:close-on-click-modal="false"
			destroy-on-close
		>
			<template #header="{ close, titleId, titleClass }">
				<div class="dialog-header center btheme cfff">
					<img src="@/assets/image/zhuTi/x6.png" alt="" />
					<div class="flex f20 fbold">新增成员</div>
					<el-icon class="pointer" size="20" color="#fff" @click="quXiaoChengYuan">
						<Close />
					</el-icon>
				</div>
			</template>
			<div class="dialog-content-cheng">
				<div class="fWrap center align-start">
					<div class="dleft">
						<el-tabs type="border-card" v-model="activeName" @tab-click="tabclick">
							<el-tab-pane label="按部门分类" name="department">
								<div class="tab-content">
									<div class="f18 c333 tCenter">部门列表</div>
									<div class="bfff tree-box">
										<el-tree
											:data="dataSourceList"
											:props="defaultProps"
											@node-click="tabListStr"
										></el-tree>
									</div>
								</div>
							</el-tab-pane>
							<el-tab-pane label="按群组分类" name="group">
								<div class="tab-content">
									<div class="f18 c333 tCenter">群组列表</div>
									<div class="bfff tree-box">
										<el-tree
											@node-click="tabListStr"
											:data="dataSourceList"
											:props="defaultProps"
										></el-tree>
									</div>
								</div>
							</el-tab-pane>
						</el-tabs>
					</div>
					<div class="flex dright">
						<el-input v-model="searchText" class="search-input" placeholder="请输入用户名搜索">
							<template #append>
								<el-button class="search-btn" type="primary" :icon="Search" @click="textClick"
									>搜索</el-button
								>
							</template>
						</el-input>
						<el-table
							border
							ref="multipleTableRef"
							:data="tableDataCheng"
							style="width: 100%"
							@select="selectTable"
							@select-all="selectAllTable"
						>
							<el-table-column type="selection" align="center" width="50" />
							<el-table-column prop="realName" align="center" label="用户名" />
							<el-table-column prop="deptName" align="center" label="部门">
								<template #default="{ row }">
									<div v-if="row.deptName">{{ row.deptName }}</div>
									<div v-else>{{ row.name }}</div>
								</template>
							</el-table-column>
						</el-table>
						<div style="display: flex; justify-content: center">
							<el-pagination
								layout="prev, pager, next"
								v-model:current-page="currentTable"
								v-model:page-size="pageSizeTable"
								:total="totalList"
								@current-change="currentChange"
							></el-pagination>
						</div>
					</div>
				</div>
				<div class="center choice">
					<div class="f16 c333">用户选择：</div>
					<div class="flex">
						<el-tag
							closable
							v-for="(item, index) in tableList"
							:key="item.id"
							effect="plain"
							round
							@close="delUserName(item, index)"
							>{{ item.realName }}</el-tag
						>
					</div>
					<el-button class="clear-btn" type="warning" @click="delTableList">取消全部选中</el-button>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="quXiaoChengYuan">取消</el-button>
					<el-button type="primary" @click="setShowMore"> 确定 </el-button>
				</div>
			</template>
		</el-dialog>
		<!-- 编辑用户 -->
		<el-dialog
			class="cheng-dialog"
			v-model="visibleUser"
			:show-close="false"
			:close-on-click-modal="false"
			destroy-on-close
			width="800px"
		>
			<template #header="{ close, titleId, titleClass }">
				<div class="dialog-header center btheme cfff">
					<img src="@/assets/image/houTai/xqun.png" alt="" />
					<div class="flex f20 fbold">编辑用户</div>
					<el-icon class="pointer" size="20" color="#fff" @click="quXiao">
						<Close />
					</el-icon>
				</div>
			</template>
			<div class="dialog-content">
				<el-form
					ref="userFormRef"
					:model="userForm"
					:rules="rules"
					class="demo-ruleForm"
					:size="formSize"
					status-icon
				>
					<div class="center">
						<div class="flex">
							<el-form-item label="群组" prop="name">
								<el-input class="name" v-model="userForm.name" placeholder="请输入用户昵称" />
							</el-form-item>
						</div>
					</div>
				</el-form>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="quXiao">取消</el-button>
					<el-button type="primary" @click="submitForms(userFormRef)"> 确定 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { nextTick } from "vue"
import { Search, RefreshRight, Edit, Delete, Upload, Refresh } from "@element-plus/icons-vue"
import { ElMessage, ElMessageBox } from "element-plus"
const { proxy } = getCurrentInstance()

const route = useRoute()
const router = useRouter()
// 按钮权限
const ruleFormRef = ref()
//已经勾选的用户
const tableList = ref([])
//新增列表
const dataSourceList = ref([])
const tableData = ref([])
const tableDataChlid = ref([])
const popoverVisible = ref([])
const dataSource = ref([])
const drawer = ref(false)
const total = ref(0)
const current = ref(1)
//二级id
const twoId = ref("")
//全局搜索
const onSearchText = ref("")
// 是否显示二级群组
const showChlid = ref(false)
//判断是部门还是群组
const typeStr = ref(null)
const defaultProps = reactive({
	children: "children",
	label: "name",
})
//编辑用户暂存
const userObj = ref({})
const activeName = ref("department") //部门
const multipleTableRef = ref()
const userFormRef = ref()
const searchText = ref("")
const tableLis = ref([])
const pageSize = ref(10)
const determine = ref("1")
const currentTable = ref(1)
const pageSizeTable = ref(8)
const totalList = ref(null)
const title = ref("")
const pId = ref("")
const searchId = ref("")
const selectClick = row => {
	tableLis.value = row
}
const selectAll = row => {
	tableLis.value = row
}
// 新增群组
const visible = ref(false)
const visibleUser = ref(false)
const setShowMore = async () => {
	visiblecheng.value = false
	let tableL = []
	tableList.value.forEach(item => {
		tableL.push({
			groupId: twoId.value,
			userId: item.id,
		})
	})
	if (tableL && tableL.length) {
		try {
			await postAxios(`/knowledge/kbGroupsUser/save`, tableL)
			const { records } = await getAxios(`/knowledge/kbGroups/listFind?id=${twoId.value}&current=1&size=10`)
			if (records) {
				tableDataChlid.value = records
			}
			ElMessage.success("添加成功")
			tableDataCheng.value = []
			tableList.value = []
		} catch (error) {
			ElMessage.error(error)
		}
	}
}
const tabclick = event => {
	if (event.props.label == "按部门分类") {
		typeStr.value = 1
	} else {
		typeStr.value = 2
	}
	department()
	tableDataCheng.value = []
}
async function department() {
	if (typeStr.value == 1) {
		dataSourceList.value = await getAxios("/system/sysDept/list")
	} else {
		dataSourceList.value = await getAxios("/knowledge/kbGroups/list")
	}
}
const quxiao = () => {
	visible.value = false
	empty()
}
const quXiao = () => {
	visibleUser.value = false
	empty()
}
const quXiaoChengYuan = () => {
	visiblecheng.value = false
	empty()
}
const qingkong = () => {
	visiblecheng.value = false
	empty()
}
function empty() {
	tableList.value = []
	ruleForm.value = {
		name: "",
		sort: 1,
	}
	tableDataCheng.value = []
	totalList.value = 0
}
//新增一级群组
const oneGroup = () => {
	fabu.value = false
	visible.value = true
	title.value = "新增一级群组"
}
//新增二级群组
const twoGroup = () => {
	fabu.value = false
	visible.value = true
	title.value = "新增二级群组"
}

// 新增成员信息
const visiblecheng = ref(false)
const setShowMoreCheng = async () => {
	fabu.value = false
	visiblecheng.value = true
	typeStr.value = "1"
	department()
}
function times(times) {
	return times.substring(0, 10)
}
const ruleForm = ref({
	name: "",
	sort: 1,
})
const userForm = reactive({
	name: "",
})
const rules = reactive({
	name: [
		{
			required: true,
			message: "请输入昵称",
			trigger: "blur",
		},
	],
})
const ruless = reactive({
	name: [
		{
			required: true,
			message: "请输入昵称",
			trigger: "blur",
		},
	],
})
const editTree = async data => {
	fabu.value = false
	title.value = "编辑群组"
	visible.value = true

	ruleForm.value = JSON.parse(JSON.stringify(data))
}
const fabu = ref(false)
const submitForm = async formEl => {
	if (fabu.value) {
		return
	} else {
		fabu.value = true
		if (!formEl) return
		await formEl.validate(async (valid, fields) => {
			if (valid) {
				try {
					if (title.value == "新增二级群组") {
						await postAxios("/knowledge/kbGroups/save", {
							name: ruleForm.value.name,
							sort: ruleForm.value.sort,
							pId: pId.value,
						})
						getList(pId.value)
						ElMessage.success("新增成功")
					} else if (title.value == "新增一级群组") {
						await postAxios("/knowledge/kbGroups/save", {
							name: ruleForm.value.name,
							sort: ruleForm.value.sort,
						})
						dataSource.value = await getAxios("/knowledge/kbGroups/list?is_deleted=2")
						ElMessage.success("新增成功")
					} else if (title.value == "编辑群组") {
						await postAxios("/knowledge/kbGroups/edit", ruleForm.value)
						ElMessage.success("编辑成功")
						dataSource.value = await getAxios("/knowledge/kbGroups/list?is_deleted=2")
						tableData.value = await getAxios(`/knowledge/kbGroups/listById?pId=${pId.value}`)
					} else if (title.value == "编辑群组") {
					}
					visible.value = false
					empty()
				} catch (error) {
					ElMessage.error(error)
					fabu.value = false
				}
			}
		})
	}
}
const submitForms = async formEl => {
	if (fabu.value) {
		return
	} else {
		fabu.value = true
		if (!formEl) return
		await formEl.validate(async (valid, fields) => {
			if (valid) {
				try {
					userObj.value.realName = userForm.name
					await postAxios("/system/sysUser/edit", userObj.value)
					ElMessage.success("编辑成功")
					visibleUser.value = false
					const { records } = await getAxios(
						`/knowledge/kbGroups/listFind?id=${twoId.value}&current=${current.value}&size=${pageSize.value}`
					)
					if (records) {
						tableDataChlid.value = records
					}
				} catch (error) {
					ElMessage.error(error)
					fabu.value = false
				}
			}
		})
	}
}
async function getList(params) {
	tableData.value = await getAxios(`/knowledge/kbGroups/listById?pId=${params}`)
	dataSource.value = await getAxios("/knowledge/kbGroups/list?is_deleted=2")
}
// 左侧树状图被单机
const treeClick = async node => {
	tableLis.value = []
	showChlid.value = node.pid != null
	if (!showChlid.value) {
		const res = await getAxios(`/knowledge/kbGroups/listById?pId=${node.id}`)
		tableData.value = res
		pId.value = node.id
		searchId.value = node.id
		total.value = 0
	} else {
		twoId.value = node.id
		try {
			const res = await getAxios(`/knowledge/kbGroups/listFind?id=${node.id}&current=1&size=${pageSize.value}`)
			if (res) {
				total.value = +res.total
				tableDataChlid.value = res.records
			}
		} catch (error) {
			ElMessage.error(error)
		}
	}
	onSearchText.value = ""
}
async function list() {
	dataSource.value = await getAxios("/knowledge/kbGroups/list?is_deleted=2")
	tableData.value = await getAxios(`/knowledge/kbGroups/listById?pId=${dataSource.value[0].id}&size=10&current=1`)
	pId.value = dataSource.value[0].id
}
list()
//批量删除群组
const delGroupAll = async () => {
	if (tableLis.value.length) {
		ElMessageBox.confirm("是否确认删除", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
		}).then(async () => {
			try {
				let delList = []
				tableLis.value.forEach(item => {
					delList.push(item.id)
				})
				if (delList.length && delList.length > 0) {
					await postAxios("/knowledge/kbGroups/deleteBatch", delList)
				} else {
					await deleteAxios(`/knowledge/kbGroups/delete?id=${pId.value}`)
				}
				ElMessage.success("删除成功")
				dataSource.value = await getAxios("/knowledge/kbGroups/list?is_deleted=2")
				tableData.value = await getAxios(`/knowledge/kbGroups/listById?pId=${pId.value}`)
				tableLis.value = []
			} catch (error) {
				ElMessage.error(error)
			}
		})
	} else {
		ElMessage.error("请先选择群组")
	}
}
//批量删除用户
const delUserAll = async () => {
	ElMessageBox.confirm("是否确认删除", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		try {
			if (tableLis.value.length) {
				let delList = []
				tableLis.value.forEach(item => {
					delList.push(item.id)
				})
				await postAxios(`/knowledge/kbGroupsUser/deleteBatch?groupId=${twoId.value}`, delList)
				ElMessage.success("删除成功")
				dataSource.value = await getAxios("/knowledge/kbGroups/list?is_deleted=2")
				const res = await getAxios(
					`/knowledge/kbGroups/listFind?id=${twoId.value}&current=${current.value}&size=${pageSize.value}`
				)
				if (res) {
					total.value = +res.total
					tableDataChlid.value = res.records
				}
				tableLis.value = []
			} else {
				ElMessage.error("请先选择用户")
			}
		} catch (error) {
			ElMessage.error(error)
		}
	})
}
//单个删除群组
const delGroup = async row => {
	let delList = [row.id]
	ElMessageBox.confirm("是否确认删除", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		try {
			await postAxios("/knowledge/kbGroups/deleteBatch", delList)
			ElMessage.success("删除成功")
			dataSource.value = await getAxios("/knowledge/kbGroups/list?is_deleted=2")
			tableData.value = await getAxios(`/knowledge/kbGroups/listById?pId=${pId.value}`)
		} catch (error) {
			ElMessage.error(error)
		}
	})
}
//单个删除用户
const delUser = async row => {
	ElMessageBox.confirm("是否确认删除", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		try {
			const userId = []
			userId.push(row.id)
			await postAxios(`/knowledge/kbGroupsUser/deleteBatch?groupId=${twoId.value}`, userId)
			ElMessage.success("删除成功")
			dataSource.value = await getAxios("/knowledge/kbGroups/list?is_deleted=2")
			const res = await getAxios(
				`/knowledge/kbGroups/listFind?id=${twoId.value}&current=${current.value}&size=${pageSize.value}`
			)
			if (res) {
				total.value = +res.total
				tableDataChlid.value = res.records
			}
		} catch (error) {
			ElMessage.error(error)
		}
	})
}

//编辑用户
const editUser = async row => {
	fabu.value = false
	visibleUser.value = true
	const res = await getAxios(`/system/sysUser/info?id=${row.id}`)
	userForm.name = res.realName
	userObj.value = res
}
const tableDataCheng = ref([])
//编辑群组
const oneDiet = async row => {
	fabu.value = false
	title.value = "编辑群组"
	const res = await getAxios(`/knowledge/kbGroups/info?id=${row.id}`)
	ruleForm.value = JSON.parse(JSON.stringify(res))
	visible.value = true
}
//新增成员点击左侧
const tabListStrId = ref("")
const tabListStr = async data => {
	tabListStrId.value = data.id
	if (typeStr.value == "1") {
		const res = await getAxios(
			`/system/sysUser/page?loginName=&realName=&phone=&deptId=${data.id}&current=${currentTable.value}&size=${pageSizeTable.value}`
		)
		totalList.value = +res.total
		tableDataCheng.value = res.records
	} else {
		const res = await getAxios(
			`/knowledge/kbGroups/listFind?id=${data.id}&current=${currentTable.value}&size=${pageSizeTable.value}`
		)
		totalList.value = +res.total
		tableDataCheng.value = res.records
	}
}
watch(tableDataCheng, () => {
	nextTick(() => {
		tableDataCheng.value.forEach(item => {
			if (tableList.value.some(v => v.id == item.id)) {
				multipleTableRef.value.toggleRowSelection(item, true)
			} else {
				multipleTableRef.value.toggleRowSelection(item, false)
			}
		})
	})
})
//勾选用户
const selectTable = (selection, row) => {
	const index = tableList.value.findIndex(item => item.id == row.id)
	if (index != "-1") {
		tableList.value.splice(index, 1)
	} else {
		tableList.value.push(row)
	}
}
const delTree = async data => {
	ElMessageBox.confirm("是否确认删除", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		try {
			await deleteAxios(`/knowledge/kbGroups/delete?id=${data.id}`)
			ElMessage.success("删除成功")
			dataSource.value = await getAxios("/knowledge/kbGroups/list?is_deleted=2")
			tableData.value = await getAxios(`/knowledge/kbGroups/listById?pId=${pId.value}`)
			tableLis.value = []
		} catch (error) {
			ElMessage.error(error)
		}
	})
}
const textClick = async () => {
	try {
		const res = await getAxios(`/system/sysUser/page?realName=${searchText.value}&current=1&size=10`)
		tableDataCheng.value = res.records
		searchText.value = ""
		total.value = +res.total
	} catch (error) {
		ElMessage.error(error)
	}
}

const refresh = async val => {
	if (typeStr.value == "1") {
		dataSourceList.value = await getAxios("/system/sysDept/list")
	} else {
		dataSourceList.value = await getAxios("/knowledge/kbGroups/list")
	}
}
const delTableList = () => {
	tableList.value = []
	multipleTableRef.value.clearSelection()
}
const selectAllTable = row => {
	if (row.length == 0) {
		tableDataCheng.value.forEach(it => {
			const index = tableList.value.findIndex(item => item.id == it.id)
			if (index != "-1") {
				tableList.value.splice(index, 1)
			}
		})
	} else {
		row.forEach(i => {
			const index = tableList.value.findIndex(item => item.id == i.id)
			if (index == "-1") {
				tableList.value.push(i)
			}
		})
	}
}
const onSearch = async val => {
	if (onSearchText.value == "") {
		ElMessage.error("请输入内容进行搜索")
	} else {
		try {
			if (val == "yh") {
				showChlid.value = true
				const res = await getAxios(
					`/knowledge/kbGroups/listFind?current=1&size=${pageSize.value}&name=${onSearchText.value}&id=${twoId.value}`
				)
				total.value = +res.total
				tableDataChlid.value = res.records
			} else {
				let obj = {}
				obj.current = 1
				obj.size = pageSize.value
				obj.name = onSearchText.value
				if (searchId.value != "") {
					obj.pId = searchId.value
				}
				const res = await getAxios(`/knowledge/kbGroups/page`, obj)
				total.value = +res.total
				tableData.value = res.records
			}
			current.value = "1"
		} catch (error) {
			ElMessage.error(error)
		}
	}
}
const fetchList = async val => {
	current.value = val
	tableLis.value = []
	try {
		const res = await getAxios(
			`/knowledge/kbGroups/listFind?id=${twoId.value}&current=${val}&size=${pageSize.value}`
		)
		if (res) {
			total.value = +res.total
			tableDataChlid.value = res.records
		}
	} catch (error) {
		ElMessage.error(error)
	}
}
const fetchLists = async val => {
	tableLis.value = []
	pageSize.value = val
	try {
		const res = await getAxios(
			`/knowledge/kbGroups/listFind?id=${twoId.value}&current=${current.value}&size=${val}`
		)
		if (res) {
			total.value = +res.total
			tableDataChlid.value = res.records
		}
	} catch (error) {
		ElMessage.error(error)
	}
}
const resettingGroup = () => {
	onSearchText.value = ""
	list()
}
const resetting = async () => {
	onSearchText.value = ""
	const res = await getAxios(`/knowledge/kbGroups/listFind?id=${twoId.value}&current=1&size=${pageSize.value}`)
	if (res) {
		total.value = +res.total
		tableDataChlid.value = res.records
	}
}
const delUserName = (val, index) => {
	tableList.value.splice(index, 1)
	multipleTableRef.value.toggleRowSelection(val, false)
}
const currentChange = async () => {
	if (typeStr.value == "1") {
		const res = await getAxios(
			`/system/sysUser/page?loginName=&realName=&phone=&deptId=${tabListStrId.value}&current=${currentTable.value}&size=${pageSizeTable.value}`
		)
		totalList.value = +res.total
		tableDataCheng.value = res.records
	} else {
		const res = await getAxios(
			`/knowledge/kbGroups/listFind?id=${tabListStrId.value}&current=${currentTable.value}&size=${pageSizeTable.value}`
		)
		totalList.value = +res.total
		tableDataCheng.value = res.records
	}
}
</script>
<style lang="scss" scoped>
@import "/style/basis";
.el-tree {
	:deep(.el-tree-node__content) {
		height: 34px;
		overflow: hidden;
		&:hover {
			.el-button {
				opacity: 1;
			}
		}
	}
	.el-tree-item {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: calc(100% - 30px);
	}
	.treeRefSpan {
		margin-right: auto;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		flex: 1;
	}
	.el-button {
		opacity: 0;
	}
}

.zuZhiJiaGou {
	background-color: #f8f8f8;
	height: 100%;
	.nav-dis {
		width: 25px;
		padding: 10px 0;
		text-align: center;
		background-color: #2972fa;
		color: #fff;
		display: none;
		position: fixed;
		top: 50;
		left: 0;
		z-index: 999;
		border-radius: 3px;
		@include maxWidth(768) {
			display: block;
		}
	}

	:deep(.dialog) {
		width: 800px;
		background: #ffffff;
		border-radius: 5px;
	}

	.dialog-content-cheng {
		:deep(.choice .el-tag) {
			height: 25px;
			background: #f4faff;
			margin-left: 10px;
			padding: 0 10px;
		}

		.choice {
			margin-top: 15px;
			padding: 20px 30px 20px 30px;
			border-top: 1px solid rgba(41, 114, 250, 0.2);
			border-bottom: 1px solid rgba(41, 114, 250, 0.2);
		}

		:deep(.clear-btn) {
			width: 100px;
			height: 30px;
			border-radius: 3px;
		}

		:deep(.el-table th.el-table__cell) {
			background: #f4faff;
		}

		:deep(.el-table .el-table__cell) {
			height: 30px;
		}

		:deep(.el-table) {
			margin-top: 30px;
			color: #787a7e;
		}

		:deep(.search-input .el-input__wrapper) {
			height: 30px;
			background-color: #f5f6f7;
		}

		.search-btn {
			background-color: #2972fa;
			color: #fff;
			height: 30px;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			font-size: 12px;
			padding-top: 7px;
		}

		.dleft {
			width: 45%;
			margin: 0;
			margin-right: 20px;
		}

		:deep(.el-tree-node__content:hover) {
			background: #f4faff;
		}

		:deep(.el-tree-node__expand-icon) {
			color: #006eff;
		}

		:deep(.el-tree-node__expand-icon.is-leaf) {
			color: #fff;
		}

		.tree-box {
			height: 350px;
			margin-top: 10px;
			padding: 20px 3px;
			overflow-y: auto;
		}

		.tab-content {
			background: #f4faff;
			border: 1px solid #e6ebf5;
			border-radius: 3px;
			padding: 40px 20px;
		}
	}

	.input-box {
		margin-bottom: 30px;
		.search-btn {
			width: 80px;
			height: 27px;
			border-radius: 0 15px 15px 0;
			@include maxWidth(1024) {
				width: 60px;
			}
			@include maxWidth(768) {
				width: 100px;
			}
			@include maxWidth(450) {
				width: 70px;
			}
		}

		input {
			width: 150px;
			height: 27px;
			background: #f5f6f7;
			border: 1px solid #e8e8ed;
			border-radius: 15px 0 0 15px;
			padding: 0 10px;
			@include maxWidth(1024) {
				width: 120px;
			}
			@include maxWidth(768) {
				width: 200px;
			}
			@include maxWidth(450) {
				width: 120px;
			}
		}
	}

	.right {
		width: 250px;
		height: 100%;
		overflow-y: scroll;
		border-right: 1px solid #ebeef5;
		@include maxWidth(1024) {
			width: 200px;
		}

		:deep(.el-tree-node__expand-icon) {
			// color: #2972fa;
			font-size: 14px;
		}

		:deep(.el-tree) {
			padding: 10px 0;
			color: #606266;
			font-size: 14px;
		}

		.title {
			border-bottom: 1px solid #dcdfe6;
			padding: 15px;
		}
	}

	:deep(.el-radio__input.is-checked .el-radio__inner::after) {
		background: #fff;
	}

	:deep(.el-tree-node__expand-icon.is-leaf) {
		visibility: hidden;
	}

	:deep(.cheng-dialog) {
		width: 500px !important;
	}

	:deep(.cheng-dialog .bu-select) {
		width: 100% !important;
	}

	:deep(.bu-select .el-input__wrapper) {
		border-radius: 3px 0 0 3px !important;
	}

	:deep(.cheng-dialog .el-dialog__body) {
		padding: 30px 40px !important;
	}

	:deep(.cheng-dialog .el-select__tags .el-tag--info) {
		background: #f4faff;
		border: 1px solid #2972fa;
		border-radius: 10px;
		color: #2972fa;
	}

	.left-bottom {
		padding: 25px;

		.table-head2 {
			border: 1px solid #eceef5;
			height: 50px;
			padding: 0 2%;
		}

		.table-head {
			margin-bottom: 25px;
			.table-head3 {
				padding-bottom: 20px;
				justify-content: left;
				.primarys {
					margin-left: 15px;
				}

				.dangers {
					color: #ff952c;
				}
			}
			.primary {
				width: 90px;
				height: 30px;
				border-radius: 2px;
			}

			.danger {
				width: 90px;
				height: 30px;
				border-radius: 2px;
				margin-left: 20px;
			}
		}

		:deep(.el-table) {
			border: 1px solid #eceef5;
		}

		:deep(.el-table th.el-table__cell) {
			background-color: #f4f7fa;
		}

		:deep(.el-table .el-table__cell) {
			height: 50px;
			color: #606266;
		}
	}

	.left {
		margin: 25px;
		// height: 100%;
		overflow-y: scroll;
	}
}
.pagination-class {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
.left-bumen {
	@include maxWidth(768) {
		display: none;
	}
}
.flex-item {
	display: flex;
	justify-content: space-between;
	position: relative;
	.i-item {
		position: absolute;
		right: 0;
		top: -5px;
		color: #666666 !important;
	}
}
.table-color {
	:deep(.el-button) {
		&:focus {
			color: #606266;
			background-color: #fff;
			border: 1px solid #dcdfe6;
		}
	}
}
.treeRefSpanText {
	width: 180px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.box-item {
	display: flex;
	.left {
		width: 35%;
		padding: 0 25px;
		margin: 0;
	}
	.right {
		width: 60%;
		padding: 20px;
	}
}
.label-icon {
	margin-left: 5px;
	padding-top: 15px;
}
</style>
